<template>
    <div class="isDialog">
        <div>
            <div>
                <el-form :model="accountQuery" ref="form" label-width="90px" :inline="true">
                    <el-form-item label="名称：">
                        <el-input v-model="accountQuery.name" placeholder="请输入名称" />
                    </el-form-item>
                    <el-form-item label="编号：">
                        <el-input v-model="accountQuery.accNumber" placeholder="请输入编号" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="findAccount" style="margin-left: 20px;">
                            查询
                        </el-button>
                        <el-button @click="exportBtn">
                            <el-icon class="el-icon--left">
                                <Download />
                            </el-icon>
                            导出
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div>
                <el-table :data="page.records" show-summary :summary-method="getSummaries" border stripe>
                    <el-table-column type="index" label="#" width="53" align="center" />
                    <el-table-column label="账户流水" align="center">
                        <template #default="scope">
                            <el-button type="primary" link @click="getAccountBill(scope.row)">
                                流水
                            </el-button>
                        </template>

                    </el-table-column>
                    <el-table-column v-for="col in tableHeader" :prop="col.prop" :key="col.id" :label="col.label"
                        :sortable="col.sortable">
                    </el-table-column>
                </el-table>
            </div>
            <div>
                <Pagination :current="page.current" :page-size="page.size" :total="page.total" @change="findAccount"
                    @update:pageSize="sizeChange" @update:current="currentChange" />
            </div>
        </div>



        <el-dialog title="查看账户流水" v-model="visible" width="60%" :destroy-on-close="true">
            <ViewAccountBill :data="data" @jump="jumpBillDetail" @close="closeOne" />
        </el-dialog>

        <el-dialog title="详情" v-model="detailVisible" :destroy-on-close="true" draggable width="80%">
            <template v-if="datas.accountType === '1'">
                <template v-if="depotHead.type === '入库'">
                    <Stockroom :depot-head="depotHead" @close="closeTwo" />
                </template>
                <template v-else-if="depotHead.type === '出库'">
                    <Allocate :depot-head="depotHead" @close="closeTwo" />
                </template>
            </template>
            <template v-else>
                <AccountHeadDetail :account-head-number="datas" @close="detailVisibleClose" />
            </template>
        </el-dialog>


    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { exportTable } from '@/utils/xlsx'
import { getDepotHead } from '@/components/material_bill_detail/js/Stoke'

// 入库/退货
import Stockroom from '@/components/material_bill_detail/Stockroom.vue'
// 出库页面
import Allocate from '@/components/material_bill_detail/Allocate.vue'
// 财务账单页面
import AccountHeadDetail from '@/components/material_bill_detail/account/AccountHeadDetail.vue';

import request from '@/api/request'
import Pagination from '@/components/pagination/Index.vue';
import ViewAccountBill from '@/components/material_bill_detail/account/ViewAccountBill.vue';
const tableRef = ref(null)

let visible = ref(false)
let detailVisible = ref(false)

const page = ref({
    current: 1,
    size: 5,
    pages: 1,
    total: 1,
    records: null
});

const accountQuery = ref({
    name: null,
    accNumber: null
})


const data = ref({})
const getAccountBill = (row) => {
    data.value = row
    visible.value = true
}


let datas = ref({
    accountType: null
})
let subData = ref({})
let depotHead = ref({
    type: null
})

/**
 * 跳转详情页面
 * @param row 账单行数据
 */
const jumpBillDetail = async (row) => {
    datas.value = row
    if (row.accountType == 1) {
        depotHead.value = await getDepotHead(row.number)
    }
    detailVisible.value = true
}

const findAccount = () => {
    request.get('report/pageFindAccount', {
        params: {
            ...accountQuery.value, current: page.value.current, size: page.value.size
        }
    }).then(resp => {
        page.value = resp.data
    })
}

const sizeChange = (pageSize: number) => {
    page.value.size = pageSize;
    findAccount
}

const currentChange = (pageCurrent: number) => {
    page.value.current = pageCurrent;
    findAccount
}

const tableHeader = ref([
    {
        id: 1,
        label: '名称',
        prop: 'name'
    },
    {
        id: 2,
        label: '编号',
        prop: 'accNumber'
    },
    {
        id: 3,
        label: '期初金额',
        prop: 'initialAmount',
        sortable: true
    },
    {
        id: 4,
        label: '本月发生额',
        prop: 'monthVariationMoney',
        sortable: true
    },
    {
        id: 5,
        label: '当前余额',
        prop: 'currentAmount',
        sortable: true
    }
])

const detailVisibleClose = () => {
    detailVisible.value = false
}

const exportBtn = () => {
    exportTable(tableRef, '商品库存报表')
}

/**
 * 设置表尾合计
 * @param param 表格数据
 */
const getSummaries = (param) => {
    const { columns, data } = param;
    const sums = [];

    columns.forEach((column, index) => {
        if (index === 0) {
            sums[index] = "合计";
            return;
        }
        if (Array.isArray(data)) {
            const values = data.map((item) => Number(item[column.property]));
            // 想合并哪些列就在这里指定
            if (column.property === "initialAmount" || column.property === "monthVariationMoney"
                || column.property === "currentAmount") {
                sums[index] = values.reduce((prev, curr) => {
                    const value = Number(curr);
                    if (!isNaN(value)) {
                        return prev + curr;
                    } else {
                        return prev;
                    }
                }, 0);
            }
        }
    });
    return sums;
}

const closeOne = () => {
    visible.value = false
}

const closeTwo = () => {
    detailVisible.value = false
}

onMounted(() => {
    findAccount()
})
</script>

<style scoped>
.el-input {
    width: 200px;
}
</style>
